<template>
  <custom-layout :isTabBar="false" navTitle="用户列表">
    <view class="user_index">
      <view class="main-container">
        <view class="header-container">
          <uni-search-bar
            v-model="searchValue"
            placeholder="请输入角色名称"
            clearButton="auto"
            cancelButton="none"
            @confirm="onSearch"
            @clear="onSearchClear"
          />
        </view>

        <custom-list
          :items="items"
          :columns="columns"
          :pagination="page"
          :isChecked="true"
          :checkedList="checkedList"
          :hideOnSinglePage="true"
          @onItemClick="(v) => $tab.push(`details?id=${v.key}`)"
          @onPageChange="onPageChange"
          @onChecked="onChecked"
        >
          <template #action="{ data }">
            <view class="action-button-container" v-if="!data.admin">
              <view class="action-button" style="background-color: #007aff" @click="$tab.push(`update?id=${data.key}`)">
                修改
              </view>
              <view
                class="action-button"
                style="background-color: #e6a23c"
                @click="$tab.push(`auth/index?id=${data.key}`)"
              >
                分配
              </view>
              <view class="action-button" style="background-color: #dd524d" @click="onDelete(data)">删除</view>
            </view>
          </template>
        </custom-list>
      </view>

      <view class="operate-container">
        <custom-checkbox :value="items.length !== 0 && checkedList.length === items.length" @onChecked="onCheckedAll">
          全选
        </custom-checkbox>
        <button class="link-botton" type="primary" plain="true" @click="$tab.push('add')">添加</button>
        <button
          class="link-botton"
          type="warn"
          plain="true"
          :disabled="checkedList.length === 0"
          @click="onBatchDelete"
        >
          删除
        </button>
      </view>
    </view>
  </custom-layout>
</template>

<script>
import { getRoleList, deleteRole, deleteBatchRole } from "@/api/system/role";

export default {
  data() {
    return {
      items: [],
      columns: {
        key: "key",
        text: "roleName",
      },
      searchValue: "",
      page: {
        pageNum: 1,
        pageSize: 20,
        totalPages: 0,
      },
      checkedList: [],
      checkedAllKeys: [],
    };
  },

  onShow() {
    this.initData();
  },
  mounted() {},
  methods: {
    async initData() {
      const options = {
        params: {
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
        },
      };
      if (this.searchValue) {
        options.userName = this.searchValue;
      }
      const { content, ...props } = await getRoleList(options);
      this.items = content;
      this.page = props;
      this.checkedList = [];
    },
    onCheckedAll(checked) {
      const getKeys = () => {
        if (this.checkedList.length) return this.checkedList;
        const list = [];
        this.items.forEach((item) => list.push(`${item.key}`));
        return list;
      };
      this.checkedList = checked ? getKeys() : [];
    },
    onDelete(item) {
      this.$message.deleteModal("是否确定永久性删除该角色？", async () => {
        await deleteRole(item.key);
        this.initData();
      });
    },
    onBatchDelete() {
      this.$message.deleteModal("是否确定批量删除已勾选角色？", async () => {
        await deleteBatchRole(this.checkedList);
        this.initData();
      });
    },
    onSearch({ value }) {
      this.searchValue = value;
      this.initData();
    },
    onSearchClear() {
      this.searchValue = "";
      this.initData();
    },
    onPageChange({ current }) {
      this.page.pageNum = current;
      this.initData();
    },
    onChecked(values) {
      this.checkedList = values;
    },
  },
};
</script>

<style lang="scss" scoped>
.user_index {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .main-container {
    width: 100%;
    height: calc(100% - 52px);
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .operate-container {
    width: 100%;
    height: 52px;
    background-color: #fff;
    padding: 4px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 1;
    position: relative;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);

    .link-botton {
      width: fit-content;
      margin: 0px;
      line-height: normal;
      font-size: 14px;
      border-radius: 0px;
      border-width: 0px;
      padding: 4px 12px;
    }
  }
}

.action-button-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;

  .action-button {
    height: 100%;
    font-size: 14px;
    padding: 0px 20px;
    color: #fff;
    display: flex;
    align-items: center;
  }
}
</style>
